<template>
  <el-form
    ref="formRef"
    :model="form"
  >
    <el-form-item
      prop="userName"
      :rules="[
        { required: true, message: '此项必填' },
      ]"
    >
      <el-input
        v-model="form.userName"
        class="h-10"
        placeholder="请输入用户名"
      />
    </el-form-item>
    <el-form-item
      prop="passWord"
      :rules="[
        { required: true, message: '此项必填' },
      ]"
    >
      <el-input
        v-model="form.passWord"
        class="h-10"
        show-password
        placeholder="请输入密码"
      />
    </el-form-item>
    <el-form-item
      prop="againPwd"
      :rules="[
        { required: true, message: '此项必填' },
      ]"
    >
      <el-input
        v-model="form.againPwd"
        class="h-10"
        show-password
        placeholder="请再次输入密码"
      />
    </el-form-item>
    <el-form-item
      prop="checked"
      :rules="[
        { required: true, message: '请勾选后在登录~' },
      ]"
    >
      <el-checkbox
        v-model="form.checked"
        size="large"
      >
        我已仔细阅读 <el-link type="primary">用户协议</el-link>

        <el-link type="primary">用户隐私权协议</el-link></el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-Button
        type="primary"
        class="btn-login"
        @click="handerRegister(formRef)"
      >确定</el-Button>
    </el-form-item>
    <el-form-item>
      <el-Button
        class="btn-login"
        @click="()=>toLoginModule('pwd-login')"
      >返回</el-Button>
    </el-form-item>
  </el-form>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { ElLink, ElCheckbox   } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { useRouterPush } from '@/utils';
// import { fetchCreateUser } from '@/service';
// import { useAuth } from '@/store';
const { toLoginModule } = useRouterPush();
const form = reactive({
  userName: '',
  passWord: '',
  againPwd:'',
  checked: false
});

const formRef = ref<FormInstance>();
// const auth = useAuth();
const handerRegister = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async  (valid) => {
    if (valid) {
      window.$message({
        type: 'warning',
        message: '功能暂时未实现'
      });
      // console.log('valid: ', valid);
      // console.log('register!');
      // const { code } = await fetchCreateUser(form);
      // console.log('code: ', code);
      // if(code == 0){
      //   window.$message({
      //     type: 'success',
      //     message: '注册成功'
      //   });
      //   auth.login(form);
      // }
    } else {
      console.log('error register!');
      return false;
    }
  });
};
</script>
<style scoped>

</style>
